<!-- 合同-合同中心-合同档案库-历史合同 -->
<template>
  <ContentCard>
    <ConditionBox :margin-bottom="20" :margin-top="20">
      <template #left>
        <a-input-search
          :style="{ width: '220px' }"
          placeholder="合同名称/编号"
          search-button
          @search="onSearch"
          @press-enter="onSearch"
          v-model="nameSearch"
        />
      </template>
      <template #right>
        <a-button type="primary" @click="add(null)" style="margin-right: 10px"
          >发起合同签署</a-button
        >
        <a-button
          type="primary"
          @click="goDraftContract"
          style="margin-right: 10px"
          >发起起草合同</a-button
        >
        <a-button type="outline" @click="add(null)" style="margin-right: 10px"
          >导入</a-button
        >
        <a-button type="outline" @click="add(null)" style="margin-right: 10px"
          >导出</a-button
        >
      </template>
    </ConditionBox>

    <div class="wrap">
      <div class="left">
        <SiderType v-model:id="sideId" />
      </div>

      <div class="right">
        <table-turn
          style="height: 100%"
          :table-data="getTableData"
          ref="tableRef"
          :args="args"
        >
          <a-table-column :width="80">
            <template #title> 序号 </template>
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column
            :width="200"
            data-index="contractName"
            title="合同名称"
          >
          </a-table-column>
          <a-table-column
            :width="200"
            data-index="contractNum"
            title="合同编号"
          >
          </a-table-column>
          <a-table-column
            :width="200"
            data-index="yuanGongName"
            title="员工姓名"
          >
          </a-table-column>
          <a-table-column :width="200" data-index="jobNum" title="员工工号">
          </a-table-column>
          <a-table-column :width="200" data-index="mobile" title="员工手机号">
          </a-table-column>
          <a-table-column :width="200" data-index="depart" title="员工部门">
          </a-table-column>
          <a-table-column :width="200" data-index="position" title="员工职位">
          </a-table-column>
          <a-table-column :width="200" data-index="natureWork" title="工作性质">
          </a-table-column>
          <a-table-column
            :width="200"
            data-index="employesStatus"
            title="员工状态"
          >
          </a-table-column>
          <a-table-column :width="200" data-index="company" title="合同公司">
          </a-table-column>
          <a-table-column :width="200" data-index="overTime" title="合同期限">
          </a-table-column>
          <a-table-column
            :width="200"
            data-index="definition"
            title="合同开始时间"
          >
          </a-table-column>
          <a-table-column
            :width="200"
            data-index="overTime"
            title="合同结束时间"
          >
          </a-table-column>
          <a-table-column
            :width="200"
            data-index="definition"
            title="合同签署日期"
          >
          </a-table-column>
          <a-table-column
            :width="200"
            data-index="definition"
            title="合同签署次数"
          >
          </a-table-column>
          <a-table-column :width="100" data-index="" title="操作" fixed="right">
            <template #cell="{ record }">
              <a-tooltip content="查看详情">
                <IconFont
                  type="icon-details-def"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer'
                  }"
                  @click="goDetail(record.contractList)"
                />
              </a-tooltip>
              <a-tooltip content="更多操作">
                <a-dropdown @select="moreItemControl">
                  <icon-font
                    type="icon-more-def"
                    :size="26"
                    :style="{
                      cursor: 'pointer'
                    }"
                    @click="singleControl(record)"
                  />
                  <template #content>
                    <a-doption :value="1">下载</a-doption>
                    <!-- <a-doption :value="2">打印</a-doption> -->
                  </template>
                </a-dropdown>
              </a-tooltip>
            </template>
          </a-table-column>
        </table-turn>
      </div>
    </div>
  </ContentCard>
</template>

<script lang="ts" setup>
import { GetContractFileList } from '@/apis/management/contract/contractManagement/file';
import { GetConfirmWaitSignedContractSignFile } from '@/apis/management/contract/contractManagement/waitSigned';
import SiderType from '../SiderType/index.vue';
import { downloadFiles, printFiles } from '@/utils/file';

onMounted(() => {
  console.log('===============================23=====');
  console.dir(document);
  console.log('====================================');
});

const router = useRouter();
const title = '合同档案库';

const breadCrumb: string[] = ['合同', '合同中心', '合同档案库'];

// 表格配置
const args = {
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  }
};

let modalVisible = ref(false); // 判断新增弹出框是否打开
let sideId = ref(0);
let currData = ref(); // 储存当前选中数据
let tableRef = ref();
let nameSearch = ref(''); // 搜索框值
let draftContractVisible = ref(false);

// 新增
const add = (record: any) => {
  modalVisible.value = true;
};

// 获取表格数据
const getTableData = async (pageData: any) => {
  try {
    const res = await GetContractFileList({
      ...pageData,
      type: 1, // 历史合同默认传1,
      typeId: sideId.value
    });
    if (res.content) {
      res.content = res.content.map((el: any) => {
        return {
          ...el,
          ...el.contractList
        };
      });
    } else {
      res.content = [];
    }
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

watch(
  () => sideId.value,
  (newVal: number) => {
    refresh();
  }
);

// 搜索框搜索事件
const onSearch = () => {
  refresh();
};

const goDetail = ({ id, userId }: { id: number; userId: number }) => {
  router.push({
    name: 'ContractDetail',
    query: {
      id,
      userId
    }
  });
};

let singleSelectId = 0; // 储存单个item移动、合并的id
let singleSelectData = {}; // 储存单个item移动、合并的值
// 点击三个小点事件
const singleControl = (record: any) => {
  singleSelectData = record;
  singleSelectId = record.id;
};

// 表格中的三个小点按钮的下拉菜单
const moreItemControl = (key: number) => {
  if (key === 1) {
    downloadPdf();
  } else if (key === 2) printFile();
  // else if (key === 3) goContractChange(singleSelectId);
  // else if (key === 4) contractFinished(singleSelectId, 11);
  // else if (key === 5) contractFinished(singleSelectId, 12);
};

// 下载合同
const downloadPdf = async () => {
  try {
    const res = await GetConfirmWaitSignedContractSignFile({
      id: singleSelectData.contractList.userId,
      typeId: singleSelectData.contractList.id
    });
    downloadFiles(res, '合同文件');
  } catch (error: unknown) {
    console.log(error);
  }
};

const printFile = async () => {
  const res = await GetConfirmWaitSignedContractSignFile({
    id: singleSelectData.contractList.userId,
    typeId: singleSelectData.contractList.id
  });
  printFiles(res);
};

// 刷新表格数据
const refresh = () => {
  tableRef.value.loadData();
};
</script>

<style scoped lang="less">
.wrap {
  display: flex;
  .right {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}
:deep(.arco-table .arco-spin) {
  height: calc(100% - 1px);
}
:deep(.arco-table-container) {
  height: 100%;
}
</style>
